{% extends "base.html" %}

{% block title %}确认预订 - 风之宿{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <div class="max-w-2xl mx-auto">
    <h1 class="text-3xl font-bold text-primary mb-8 text-center">确认预订信息</h1>
    
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
      <!-- 房间信息 -->
      <div class="p-6 border-b border-gray-100">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">房间信息</h2>
        <div class="flex flex-col md:flex-row gap-6">
          <!-- 房间图片 -->
          <div class="md:w-1/3">
            <div class="rounded-lg overflow-hidden h-40 bg-gray-100">
              {% if booking_info.room.image_url %}
                <img src="{{ url_for('static', filename='uploads/' + booking_info.room.image_url) }}"
                     alt="{{ booking_info.room.name }}"
                     class="w-full h-full object-cover">
              {% else %}
                <img src="{{ url_for('static', filename='images/default-room.png') }}"
                     alt="默认房间图片"
                     class="w-full h-full object-cover">
              {% endif %}
            </div>
          </div>
          
          <!-- 房间详情 -->
          <div class="md:w-2/3">
            <h3 class="text-xl font-semibold text-gray-800">{{ booking_info.room.name }}</h3>
            <div class="flex items-center mt-2">
              <span class="text-sm text-gray-500 mr-3">容纳 {{ booking_info.room.capacity }} 人</span>
              <span class="text-sm px-2 py-0.5 bg-gray-100 text-gray-600 rounded">
                {{ booking_info.room.room_type }}
              </span>
            </div>
            <p class="text-gray-600 mt-3 text-sm">{{ booking_info.room.description }}</p>
          </div>
        </div>
      </div>
      
      <!-- 预订详情 -->
      <div class="p-6 border-b border-gray-100">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">预订详情</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="space-y-3">
            <div class="flex justify-between">
              <span class="text-gray-600">入住日期:</span>
              <span class="font-medium">{{ booking_info.check_in }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">退房日期:</span>
              <span class="font-medium">{{ booking_info.check_out }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">入住天数:</span>
              <span class="font-medium">{{ booking_info.nights }} 晚</span>
            </div>
          </div>
          <div class="space-y-3">
            <div class="flex justify-between">
              <span class="text-gray-600">入住人数:</span>
              <span class="font-medium">{{ booking_info.guests }} 人</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">房间单价:</span>
              <span class="font-medium">¥{{ booking_info.room.price }}/晚</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-600">总计:</span>
              <span class="font-bold text-primary text-xl">¥{{ booking_info.total_price }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="p-6 bg-gray-50">
        <form method="POST" action="{{ url_for('user.book_room') }}">
          <input type="hidden" name="room_id" value="{{ booking_info.room.id }}">
          <input type="hidden" name="check_in" value="{{ booking_info.check_in }}">
          <input type="hidden" name="check_out" value="{{ booking_info.check_out }}">
          <input type="hidden" name="guests" value="{{ booking_info.guests }}">
          
          <div class="flex flex-col sm:flex-row gap-4 justify-end">
            <a href="{{ url_for('user.book_room') }}" 
               class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-center">
              返回修改
            </a>
            <button type="submit" 
                    class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm hover:shadow font-medium">
              确认预订
            </button>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 注意事项 -->
    <div class="mt-6 bg-blue-50 border border-blue-100 rounded-lg p-4">
      <h3 class="font-medium text-blue-800 mb-2 flex items-center">
        <i class="fas fa-info-circle mr-2"></i> 预订须知
      </h3>
      <ul class="text-sm text-blue-700 space-y-1">
        <li>• 入住时间为下午14:00后，退房时间为中午12:00前</li>
        <li>• 如需提前入住或延迟退房，请提前联系我们</li>
        <li>• 预订后如需取消，请至少在入住前24小时通知</li>
        <li>• 房间价格已包含服务费和税费</li>
      </ul>
    </div>
  </div>
</div>
{% endblock %}